<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影院售票后台系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.25/dist/vue.global.prod.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        secondary: '#888888',
                        neutral: '#f5f7fa',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .form-box-shadow {
                box-shadow: 0 0 20px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center">
<div id="app" class="w-full h-screen flex items-center justify-center bg-cover bg-center"
     style="background-image: url('https://picsum.photos/id/1067/1920/1080');">
    <div class="absolute inset-0 bg-black/50"></div>

    <div class="relative w-full max-w-md px-6 py-8 bg-white/90 rounded-xl form-box-shadow backdrop-blur-sm">
        <h3 class="text-[clamp(1.5rem,3vw,2.25rem)] font-semibold text-center text-secondary mb-10 tracking-wide">
            影院售票后台系统
        </h3>

        <form class="space-y-6">
            <div class="space-y-2">
                <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-user-circle-o text-lg"></i>
                        </span>
                    <input type="text" id="username" v-model="loginForm.username"
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                           placeholder="请输入用户名">
                </div>
            </div>

            <div class="space-y-2">
                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock text-lg"></i>
                        </span>
                    <input :type="passwordType" id="password" v-model="loginForm.password"
                           class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300"
                           placeholder="请输入密码">
                    <button type="button" @click="togglePasswordVisibility"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
                        <i :class="passwordVisible ? 'fa fa-eye-slash' : 'fa fa-eye'"></i>
                    </button>
                </div>
            </div>

            <div class="pt-4 flex justify-center space-x-6">
                <button type="button" @click="reset"
                        class="px-6 py-2.5 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
                    重置
                </button>
                <button type="button" @click="login"
                        class="px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    登录
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const loginForm = ref({
                username: 'admin',
                password: 'admin'
            });

            const passwordVisible = ref(false);
            const passwordType = computed(() => passwordVisible.value ? 'text' : 'password');

            const reset = () => {
                loginForm.value.username = '';
                loginForm.value.password = '';
            };

            const togglePasswordVisibility = () => {
                passwordVisible.value = !passwordVisible.value;
            };

            const login = () => {
                // 模拟登录API调用
                // 在实际部署时，将此URL替换为您的后端API地址
                const apiUrl = 'http://localhost:8080/api/login';

                axios.post(apiUrl, loginForm.value)
                    .then(res => {
                        if (res.data.code === 1) {
                            ElMessage.success(res.data.msg);
                            // 登录成功后跳转到首页
                            setTimeout(() => {
                                window.location.href = '/index.html';
                            }, 1000);
                        } else {
                            ElMessage.error(res.data.msg);
                            reset();
                        }
                    })
                    .catch(err => {
                        console.error('登录失败:', err);
                        ElMessage.error('网络错误，请稍后重试');
                    });
            };

            return {
                loginForm,
                passwordVisible,
                passwordType,
                reset,
                togglePasswordVisibility,
                login
            };
        }
    }).use(ElMessage).mount('#app');
</script>
</body>
</html>
